<template>
	<div>
		<ul class="myMods">
			<li v-for="mod in myMods" :key="mod.path" :style="{background:mod.meta.color||'#909399'}">
				<a v-if="mod.meta.type=='link'" :href="mod.path" target="_blank">
					<i :class="mod.meta.icon||'el-icon-menu'"></i>
					<p>{{ mod.meta.title }}</p>
				</a>
				<router-link v-else :to="{ path: mod.path }">
					<i :class="mod.meta.icon||'el-icon-menu'"></i>
					<p>{{ mod.meta.title }}</p>
				</router-link>
			</li>
			<li class="modItem-add" @click="addMods">
				<a href="javascript:void(0)">
					<i class="el-icon-plus"></i>
				</a>
			</li>
		</ul>

		<el-drawer title="添加应用" v-model="modsDrawer" size="100%" destroy-on-close>
			<el-container>
				<el-main class="nopadding">
					<el-row style="margin-top:20px;">
						<el-alert
							title="将功能模块拖动到我的应用中点击保存设置快捷入口。"
							type="success">
						</el-alert>
					</el-row>
					<el-scrollbar style="margin-top:20px;">
						<el-row>
							<el-col :span="12">
								<div class="setMods">
									<h4>全部应用 ( {{filterMods.length}} )</h4>
									<draggable tag="ul" v-model="filterMods" animation="200" item-key="path" :sort="false" group="common">
										<template #item="{ element }">
											<li :style="{background:element.meta.color||'#909399'}">
												<i :class="element.meta.icon||'el-icon-menu'"></i>
												<p>{{element.meta.title}}</p>
											</li>
										</template>
									</draggable>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="setMods">
									<h4>我的常用 ( {{myMods.length}} )</h4>
									<draggable tag="ul" v-model="myMods" animation="200" item-key="path" group="common">
										<template #item="{ element }">
											<li :style="{background:element.meta.color||'#909399'}">
												<i :class="element.meta.icon||'el-icon-menu'"></i>
												<p>{{element.meta.title}}</p>
											</li>
										</template>
									</draggable>
								</div>
							</el-col>
						</el-row>
					</el-scrollbar>
				</el-main>
				<el-footer>
					<el-button size="small" @click="closeBtn">关 闭</el-button>
					<el-button type="primary" :loading="isSaveing" size="small" @click="saveMods">保 存</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
	import draggable from 'vuedraggable'
	import {mapState} from 'vuex';
	export default {
		components: {
			draggable
		},
		data() {
			return {
				mods: [],
				myMods: [],
				myModsName: [],
				filterMods: [],
				modsDrawer: false,
				myModsList: [],
				myModsNameList: [],
				isSaveing: false,
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.viewTags.userInfo
			})
    	},
		mounted(){
			this.getMods()
		},
		methods: {
			addMods(){
				this.modsDrawer = true
				this.filterMods =  this.mods.filter(item => {
					return !this.myModsName.includes(item.name)
				})
				
				let userPermissions = this.userInfo.permissions;
				let newFilterMods = []
				this.filterMods.forEach((item, i) => {
					 if (item.name != 'dashboard') {
						 if (item.meta && item.meta.role && userPermissions.includes(item.meta.role[0])) {
							 newFilterMods.push(item)
						 }
					 }else{
						newFilterMods.push(item) 
					 }
				})
				this.filterMods = newFilterMods
			},
			async getMods(){
				//这里可用改为读取远程数据
				let arr = ['personal_commonly_used_functions']
				var res = await this.$HTTP.get('config/personal', {key: arr})
				if(res.error == 0){
					this.myModsName = res.data.personal_commonly_used_functions.length ? res.data.personal_commonly_used_functions : []
					this.myModsNameList = res.data.personal_commonly_used_functions.length ? res.data.personal_commonly_used_functions : []
				}
				var menuTree = await this.$router.sc_getMenu();
				if(menuTree) this.filterMenu(menuTree)
				this.myMods = this.mods.filter(item => {
					return this.myModsName.includes(item.name)
				})
				this.myModsList = this.myMods
				this.filterMods =  this.mods.filter(item => {
					return !this.myModsName.includes(item.name)
				})
			},
			filterMenu(map){
				map.forEach(item => {
					if(item.meta.hidden){
						return false
					}
					if(item.meta.type=='iframe'){
						item.path = `/i/${item.name}`
					}
					if(item.children&&item.children.length > 0){
						this.filterMenu(item.children)
					}else{
						this.mods.push(item)
					}
				})
			},
			async saveMods(){
				this.isSaveing = true;
				const myModsName = this.myMods.map(v => v.name)
				let info = [
					{
						"key": "personal_commonly_used_functions",
						"value" : myModsName
					}
				]
				var res = await this.$HTTP.put('config', {config: info}).catch(()=>{
					this.isSaveing = false;
				})
				this.isSaveing = false;
				if(res.error == 0){
					this.$TOOL.data.set("my-mods", myModsName)
					this.$notify.success("设置常用成功")
					this.myModsName = myModsName
					this.myModsNameList = myModsName
					this.myModsList = this.myMods
					this.modsDrawer = false
				}
			},
			// 关闭不保存
			closeBtn(){
				let status = this.getbj()
				if(!status){
					this.$confirm('检测到你的常用有修改，退出后不会保存修改，是否退出?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.modsDrawer = false
						this.myMods = this.myModsList
						this.myModsName = this.myModsNameList
					})
					.catch(() => {
					});
				}else {
					this.modsDrawer = false
					this.myMods = this.myModsList
					this.myModsName = this.myModsNameList
				}
			},
			getbj(){
				for(let i = 0; i < this.myModsList.length; i++){
					if(this.myMods.indexOf(this.myModsList[i]) == -1){
						return false
					}
				}
				for(let i = 0; i < this.myMods.length; i++){
					if(this.myModsList.indexOf(this.myMods[i]) == -1){
						return false
					}
				}
				for(let i = 0; i < this.myMods.length; i++){
					if(this.myMods[i].name != this.myModsList[i].name){
						return false
					}
				}
				return true
			}
		}
	}
</script>

<style scoped>
	.myMods {list-style:none;margin-top:20px;}
	.myMods li {display: inline-block;width: 100px;height:100px;vertical-align: top;transition:all 0.3s ease;margin:10px !important;border-radius:5px;}
	.myMods li:hover {opacity: 0.8;}
	.myMods li a {width: 100%;height: 100%;padding:10px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: #fff;}
	.myMods li i {font-size: 26px;color: #fff;}
	.myMods li p {font-size: 12px;color: #fff;margin-top: 10px;width: 100%;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}

	.modItem-add {border: 1px dashed #ddd;cursor: pointer;}
	.modItem-add i {font-size: 30px;color: #999!important;}
	.modItem-add:hover,.modItem-add:hover i {border-color: #409EFF;color: #409EFF!important;}

	.setMods {padding:0 20px;}
	.setMods h4 {font-size: 14px;font-weight: normal;}
	.setMods ul {margin:20px -5px;min-height: 90px;}
	.setMods li {display: inline-block;width: 80px;height:80px;text-align: center;margin:5px;color: #fff;vertical-align: top;padding:4px;padding-top:15px;cursor: move;border-radius: 3px;}
	.setMods li i {font-size: 20px;}
	.setMods li p {font-size: 12px;margin-top: 10px;}
	.setMods li.sortable-ghost {opacity: 0.3;}

	/deep/ .el-card__header {
		border-bottom: 0;
		padding: 15px 20px 0 20px;
	}
</style>
